import { Button, Col, DatePicker, Form, Input, Row, Select, Table } from 'antd';
import { useState } from 'react';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import moment from 'moment';
import { getPaymentTurnoverStatus } from 'src/lib/dataDictionary';
import basicService from '../../../service/basic/basic.service';
import { useRequest } from '../../../lib/request';
import './css/bankPaymentTurnoverList.scss';
import { formatNumber } from '../../../lib/util';

const { Option } = Select;
const initialSearchParams = {
  orderStatus: '',
};
const turnoverStatus = getPaymentTurnoverStatus();
const PayStatusSlt = function (props) {
  /* 支付状态选择框 */
  return (
    <Select {...props}>
      <Option value="" disabled>
        请选择
      </Option>
      {[...turnoverStatus].map(([key, value]) => {
        return (
          <Option value={key} key={key}>
            {value}
          </Option>
        );
      })}
    </Select>
  );
};

function BankPaymentTurnoverList(props) {
  const [pageNum, setPageNum] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [searchForm, setSearchForm] = useState(initialSearchParams);
  const [form] = Form.useForm();
  const params = {
    pageNum,
    pageSize,
    ...searchForm,
  };
  const [{ data = {} }, loading] = useRequest(
    () => basicService.getBankOrderList(params),
    [pageNum, pageSize, searchForm],
  );

  function formChange(value) {
    /**
     * 表单数值变化
     * */
    const startDate = value.dateRange?.[0].format('YYYY-MM-DD');
    const endDate = value.dateRange?.[1].format('YYYY-MM-DD');
    setSearchForm({
      ...value,
      startDate,
      endDate,
      dateRange: undefined,
    });
  }

  function reset() {
    /**
     * 重置
     * */
    form.resetFields();
    setSearchForm(form.getFieldsValue());
  }

  // function download() {
  //   /**
  //    * 导出
  //    * */
  //   basicService.downloadDealerTemplate();
  // }

  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
      width: 60,
      render: (...record) => {
        return <span>{record[2] + 1}</span>;
      },
    },
    {
      title: '网商订单号',
      dataIndex: 'prodOrderNo',
      width: 200,
    },
    {
      title: '订单编号',
      width: 160,
      dataIndex: 'bizNo',
    },
    {
      title: '付款方客户名称',
      width: 200,
      dataIndex: 'agentCustName',
      textWrap: 'word-break',
      ellipsis: true,
    },
    {
      title: '收款方账户',
      width: 140,
      dataIndex: 'receiptAccountNo',
    },
    {
      title: '收款方账户名称',
      width: 200,
      dataIndex: 'receiptAccountName',
      textWrap: 'word-break',
      ellipsis: true,
    },
    {
      title: '交易金额（元）',
      width: 150,
      dataIndex: 'amount',
      render: (val) => formatNumber(val),
    },
    {
      title: '支付状态',
      width: 160,
      dataIndex: 'orderStatus',
      render: (text) => {
        return turnoverStatus.get(text) || '';
      },
    },
    {
      title: '交易时间',
      width: 200,
      dataIndex: 'createTime',
      render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '支付失败原因',
      width: 240,
      dataIndex: 'payErrorMsg',
      textWrap: 'word-break',
      ellipsis: true,
    },
  ];

  return (
    <div>
      <Form
        form={form}
        name=""
        initialValues={initialSearchParams}
        className="common-table-search-wrap bankPaymentTurnoverList-search-wrap"
        onFinish={formChange}
      >
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item name="agentCustName" label="付款方客户名称">
              <Input placeholder="请输入付款方客户名称" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="receiptAccountName" label="收款方账户名称">
              <Input placeholder="请输入收款方账户名称" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="bizNo" label="订单编号">
              <Input placeholder="请输入订单编号" allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="orderStatus" label="支付状态">
              <PayStatusSlt />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="交易金额">
              <Row span={24} gutter={10}>
                <Col span={12}>
                  <Form.Item
                    name="amountLow"
                    rules={[
                      {
                        pattern: /^\d*$/,
                        message: '交易金额只能是整数',
                      },
                    ]}
                  >
                    <Input placeholder="请输入最低金额" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="amountUp"
                    rules={[
                      {
                        pattern: /^\d*$/,
                        message: '交易金额只能是整数',
                      },
                    ]}
                  >
                    <Input placeholder="请输入最高金额" allowClear />
                  </Form.Item>
                </Col>
              </Row>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="交易日期" name="dateRange">
              <DatePicker.RangePicker format="YYYY-MM-DD" />
            </Form.Item>
          </Col>
        </Row>
        <Row justify="end" className="common-table-search-btn-wrap">
          <Col span={6}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              搜索
            </Button>
            <Button icon={<ReloadOutlined />} onClick={reset}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      {/* <Row className="common-table-operation-wrap"> */}
      {/*  <Col> */}
      {/*    <Space size={30}> */}
      {/*      <Button */}
      {/*        type="primary" */}
      {/*        icon={<CloudDownloadOutlined />} */}
      {/*        onClick={download} */}
      {/*      >导出 */}
      {/*      </Button> */}
      {/*    </Space> */}
      {/*  </Col> */}
      {/* </Row> */}
      <Table
        rowKey="id"
        columns={columns}
        loading={loading}
        dataSource={data?.list || []}
        scroll={{
          x: 'max-content',
        }}
        pagination={{
          position: ['bottomRight'],
          showSizeChanger: true,
          current: pageNum,
          total: data?.total || 0,
          showTotal: (total) => `共 ${total} 条数据`,
          onChange: (num, size) => {
            let tempNum = num;
            if (size !== pageSize) {
              setPageSize(size);
              tempNum = 1;
            }
            setPageNum(tempNum);
          },
        }}
      />
    </div>
  );
}

export default BankPaymentTurnoverList;
